<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.虚拟元素创建-React.createElement</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
</head>

<body>
    <!--3、创建容器元素-->
    <div id="root"></div>
    <script>
        //获取真实DOM元素对象
        //console.dir(document.getElementById('root'))

        //为了程序需要，React自己搞出来了一个对象，虚拟DOM元素对象，将在开发过程中所需要的一些必要属性添加进来
        //怎么创建出来这样的一个虚拟元素对象？？
        //两个办法：一个是通过React对象下的一个方法；另一个就是React比较推荐的写法：JSX
        // document.createElement(); -- 创建的真实DOM元素对象
        // React.createElement()  -- 创建的虚拟DOM元素对象

        //通过React.createElement()来创建虚拟元素对象,都是在堆内存中创建
        //createElement()方法可以传入三个参数
        //参数1：元素的名称
        // let vDOM = React.createElement('h1');  // <h1></h1>
        // console.log(vDOM)

        //参数2：元素的属性,值为一个对象{}，如果有属性则在这个对象中添加键值对，否则直接写成空{}或者null
        //有属性
        // let vDOM = React.createElement('h1', { title: '百度', id: 'box', class: 'box' }); // <h1 title='百度' id="box" class="box"></h1>
        //vDOM.setAttribute('title','百度');
        // console.log(vDOM);

        //无属性
        // let vDOM = React.createElement('h1', {}); //vDOM.setAttribute('title','百度');
        // let vDOM = React.createElement('h1', null); //vDOM.setAttribute('title','百度');
        // console.log(vDOM);

        //获取容器元素
        const root = ReactDOM.createRoot(document.querySelector('#root'));

        //参数3：元素的值
        //如果想要获取标签中间的内容，在props属性中的children
        // let vDOM = React.createElement('h1', { title: '百度', id: 'box', className: 'box' }, '尚硅谷'); // <h1 title='百度' id="box" class="box">尚硅谷</h1>
        // console.log(vDOM)

        // root.render(vDOM);//<div id="root"><h1 title='百度' id="box" class="box">尚硅谷</h1></div>

        //如果想要在h1元素的里面再来添加子元素
        //h1里面想要继续添加一个<span><a href="http://www.atguigu.com">尚硅谷</a></span>
        // let vDOM = React.createElement('h1', { title: '百度', id: 'box', className: 'box' },
        //     React.createElement('span', {}, React.createElement('a', { href: "http://www.atguigu.com" }, '尚硅谷')));
        // root.render(vDOM);

        //如果想要在h1里面的span和a标签形成兄弟元素
        // const vDOM = React.createElement('h1', { title: '尚硅谷' }, React.createElement('span', {}, '百度'), React.createElement('a', { href: "http://www.jd.com" }, '京东'));
        // root.render(vDOM);

        // let a = [1, 2, 3, 4, 5]

        //在第三个参数上可以设置成一个数组，包裹多个虚拟元素对象
        // let arr = [<span>1</span>, <span>2</span>, <span>3</span>];  JSX的写法 需要搭配babel文件一起使用
        let span1 = React.createElement('span', { key: '0', a: 'aa' }, '1');
        let span2 = React.createElement('span', { key: '1', b: 'bb' }, '2');
        let span3 = React.createElement('span', { key: '2', c: 'cc' }, '3');
        console.log(span1)
        console.log(span2)
        console.log(span3)
        const vDOM = React.createElement('h1', { title: '尚硅谷' }, [span1, span2, span3]);
        console.log(vDOM);
        //render的作用：就是将虚拟DOM转化成真实DOM
        root.render(vDOM);

        //测试
        console.log(document.getElementsByTagName('h1')[0]);
    </script>
</body>

</html>